<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>学生 - 大学生体质测试管理系统</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <style>
      body {
        background-color: #f8f9fa;
      }
      .navbar {
        background-color: #4b5cc4 !important;
        padding: 0.5rem 2rem;
      }
      .navbar-brand {
        color: white !important;
        font-size: 1.1rem;
      }
      .sidebar {
        background-color: #fff;
        min-height: calc(100vh - 56px);
        padding: 20px 0;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
      }
      .sidebar a {
        color: #666;
        padding: 12px 20px;
        display: block;
        text-decoration: none;
        font-size: 0.9rem;
        border-left: 3px solid transparent;
      }
      .sidebar a:hover,
      .sidebar a.active {
        background-color: #f0f2ff;
        color: #4b5cc4;
        border-left: 3px solid #4b5cc4;
      }
      .main-content {
        padding: 30px;
        min-height: calc(100vh - 56px);
      }
      .card {
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
      }
      .card:hover {
        transform: translateY(-5px);
      }
      .card-title {
        color: #4b5cc4;
        border-bottom: 2px solid #f0f2ff;
        padding-bottom: 10px;
        margin-bottom: 20px;
      }
     .card.h-100 {
  height: 450px; /* 固定高度 */
}

#cameraContainer {
  width: 100%;
  height: 100%; /* 让摄像头容器填满卡片 */
  position: relative;
  overflow: hidden;
}

#videoFeed {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频填充不变形 */
}

      .user-info {
        display: flex;
        align-items: center;
        color: white;
      }
      .user-info img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .btn-custom {
        background-color: #4b5cc4;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
      }
      .btn-custom:hover {
        background-color: #3f4da8;
        color: white;
      }
      .btn-danger {
        background-color: #dc3545;
        color: white;
      }
      .btn-danger:hover {
        background-color: #c82333;
        color: white;
      }
      .personal-info-avatar {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg">
      <span class="navbar-brand">苏高敏的系统</span>
      <div class="user-info ml-auto">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.mPdvq3KzeG9nnl03NzLLDQHaE3?rs=1&pid=ImgDetMain"
          alt="用户头像"
        />
        <span>学生用户</span>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 sidebar">
          <a href="#" class="active"><i class="fas fa-home"></i> 首页</a>
          <a href="#"><i class="fas fa-user"></i> 个人中心</a>
          <a href="#">体测项目管理</a>
          <a href="#">运动处方管理</a>
          <a href="#">活动力分析</a>
          <a href="#">成绩管理</a>
          <a href="#">统计管理</a>
          <a href="#" id="startCamera">体质测试</a>
        </div>

        <div class="col-md-10 main-content">
          <div class="card welcome-card" style="margin-bottom: 30px">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <h5 class="card-title mr-3">欢迎使用学生系统</h5>
                <p class="text-muted mb-0">当前用户：苏高敏</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class="card h-100">
                <div class="card-body">
                  <h5 class="card-title">个人信息</h5>
                  <div class="text-center mb-3">
                    <img
                      class="personal-info-avatar"
                      src="https://tse3-mm.cn.bing.net/th/id/OIP-C.mPdvq3KzeG9nnl03NzLLDQHaE3?rs=1&pid=ImgDetMain"
                      alt="用户头像"
                    />
                  </div>
                  <div class="mt-3">
                    <p class="mb-2"><strong>学号：</strong> 202141624</p>
                    <p class="mb-2"><strong>姓名：</strong> 苏高敏</p>
                    <p class="mb-2"><strong>班级：</strong> 测控211</p>
                    <p class="mb-2"><strong>专业：</strong> 测控技术与仪器</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6 mb-4">
              <div class="card h-100">
                <div class="card-body d-flex flex-column">
                  <h5 class="card-title">体质测试</h5>
                  <div id="cameraContainer" class="flex-grow-1" style="display: none">
                    <img
                      id="videoFeed"
                      src="https://c79d-123-112-11-208.ngrok-free.app/video_feed"
                      alt="视频流"
                    />
                  </div>
                  <div id="testButtonContainer" class="text-center py-3">
                    <button
                      id="testButton"
                      class="btn btn-primary"
                      onclick="toggleCamera()"
                    >
                      开始体质测试
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="card h-100">
                <div class="card-body">
                  <h5 class="card-title">运动处方建议</h5>
                  <ul class="list-unstyled">
                    <li class="mb-2">✓ 每周进行3-4次有氧运动</li>
                    <li class="mb-2">✓ 每次运动时间30-40分钟</li>
                    <li class="mb-2">✓ 建议进行：跑步、游泳、骑行</li>
                    <li class="mb-2">✓ 注意运动强度循序渐进</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="analysis-panel">
              <h5>实时分析</h5>
              <div id="resultDisplay" class="alert alert-info">
                <span id="counter">当前计数：0</span>
                <div class="progress mt-2">
                  <div
                    id="progressBar"
                    class="progress-bar"
                    style="width: 0%"
                  ></div>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="card h-100">
                <div class="card-body">
                  <h5 class="card-title">活动力分析</h5>
                  <div class="activity-stats">
                    <div class="stat-item mb-4">
                      <h6 class="text-muted">本周运动数据</h6>
                      <p class="mb-2">
                        <i class="fas fa-clock text-primary"></i>
                        总运动时长：8小时
                      </p>
                      <p class="mb-2">
                        <i class="fas fa-walking text-success"></i>
                        平均每日步数：8000步
                      </p>
                      <p class="mb-2">
                        <i class="fas fa-fire text-danger"></i>
                        消耗热量：2400千卡
                      </p>
                    </div>
                    <div class="stat-item">
                      <h6 class="text-muted">运动达标情况</h6>
                      <p class="mb-2">✓ 本周运动次数：4次</p>
                      <p class="mb-2">✓ 达标天数：5天</p>
                      <p class="mb-2">✓ 运动强度：中等</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 脚本 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 请替换为你自己的 FontAwesome kit 代码 -->
    <script src="https://kit.fontawesome.com/6307b23c76.js"></script>
    <script>
      let isCameraOn = false;
      let intervalId;

      async function toggleCamera() {
        const cameraContainer = document.getElementById("cameraContainer");
        const testButton = document.getElementById("testButton");
        const videoFeed = document.getElementById("videoFeed");

        if (!isCameraOn) {
          try {
            // 启动后端摄像头逻辑，请求返回 JSON 数据
            const startRes = await fetch(
              "https://c79d-123-112-11-208.ngrok-free.app/control-camera",
              {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ action: "start" }),
              }
            );
            const startStatus = await startRes.json();
            console.log("启动摄像头：", startStatus);

            // 显示视频流，直接设置 img 标签的 src 属性加载视频流
            cameraContainer.style.display = "block";
            videoFeed.src = "https://c79d-123-112-11-208.ngrok-free.app/video_feed";
            testButton.textContent = "停止测试";
            isCameraOn = true;

            // 开始轮询 /control-camera 接口获取计数信息
            intervalId = setInterval(async () => {
              const res = await fetch("https://c79d-123-112-11-208.ngrok-free.app/control-camera");
              if (res.ok) {
                const status = await res.json();
                document.getElementById("counter").textContent = `当前计数：${status.count}`;
                document.getElementById("progressBar").style.width = `${Math.min(status.count * 10, 100)}%`;
              }
            }, 1000);
          } catch (error) {
            console.error("操作失败:", error);
          }
        } else {
          // 停止摄像头 & 停止轮询
          clearInterval(intervalId);
          cameraContainer.style.display = "none";
          videoFeed.src = "";
          testButton.textContent = "开始体质测试";
          isCameraOn = false;

          // 通知后端停止摄像头
          const response = await fetch(
            "https://c79d-123-112-11-208.ngrok-free.app/control-camera",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ action: "stop" }),
            }
          );
          const data = await response.json();
          alert(`测试结束！总次数：${data.count}`);
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </body>
</html>
